/**
 * 双环图
 */
import React, { memo } from "react";
import { Chart, Tooltip, Legend, Facet } from "bizcharts";
import DataSet from "@antv/data-set";

const { DataView } = DataSet;

const CompareDonut = memo(({ compareDonutData }) => (
  <div>
    <Chart height={400} data={compareDonutData} padding={'auto'} forceFit>
      <Tooltip showTitle={false} />
      <Legend offsetY={60} />
      <Facet
        type="rect"
        fields={["year"]}
        padding={50}
        colTitle={{
          offsetY: -30,
          style: {
            fontSize: 18,
            textAlign: "center",
            fill: "#999"
          }
        }}
        eachView={(view, facet) => {
          const data = facet.data;
          const dv = new DataView();
          dv.source(data).transform({
            type: "percent",
            field: "profit",
            dimension: "area",
            as: "percent"
          });
          view.source(dv, {
            percent: {
              formatter: val => {
                return (val * 100).toFixed(2) + "%";
              }
            }
          });
          view.coord("theta", {
            innerRadius: 0.35
          });
          view
            .intervalStack()
            .position("percent")
            .color("area")
            .label("percent", {
              offset: -8
            })
            .style({
              lineWidth: 1,
              stroke: "#fff"
            });
        }}
      />
    </Chart>
  </div>
));

export default CompareDonut;
